<script setup lang="ts">
import pkg from '/package.json'
import { ref, watchEffect } from 'vue'
import {
  format,
  endOfMonth,
  endOfYear,
  startOfMonth,
  startOfYear,
  subMonths,
  addDays,
  startOfWeek,
  endOfWeek,
  addHours,
  addMinutes,
  addSeconds
} from 'date-fns'

const dateValue = ref(format(new Date(), 'yyyy-MM-dd'))
const dateTimeValue = ref(format(new Date(), 'yyyy-MM-dd HH:mm:ss'))
const rangeValue = ref<string[]>([format(new Date(), 'yyyy-MM-dd'), format(addDays(new Date(), 1), 'yyyy-MM-dd')])
console.log(addHours(Date.now(), 1))
console.log('rangeValue', rangeValue.value)

const timeRangeValue = ref([
  {
    hours: new Date().getHours(),
    minutes: new Date().getMinutes(),
    seconds: new Date().getSeconds()
  },
  {
    hours: addHours(Date.now(), 1).getHours(),
    minutes: addMinutes(Date.now(), 10).getMinutes(),
    seconds: addSeconds(Date.now(), 30).getSeconds()
  }
])
const presetDates = ref([
  { label: 'Today', value: [new Date(), new Date()] },
  { label: 'This month', value: [startOfMonth(new Date()), endOfMonth(new Date())] },
  {
    label: 'Last month',
    value: [startOfMonth(subMonths(new Date(), 1)), endOfMonth(subMonths(new Date(), 1))]
  },
  { label: 'This year', value: [startOfYear(new Date()).getTime(), endOfYear(new Date()).getTime()] }
])
const timeValue = ref({
  hours: new Date().getHours(),
  minutes: new Date().getMinutes()
})
const secondsValue = ref({
  hours: new Date().getHours(),
  minutes: new Date().getMinutes(),
  seconds: new Date().getSeconds()
})
// startOfWeek & endOfWeek 默认以周日作为一周的开始，可以传递一个选项对象，以周一作为一周的开始：{ weekStartsOn: 1 }
const options: any = { weekStartsOn: 1 }
const weekValue = ref([startOfWeek(new Date(), options), endOfWeek(new Date(), options)])
const monthValue = ref({
  year: new Date().getFullYear(),
  month: new Date().getMonth()
})
const yearValue = ref(new Date().getFullYear())

watchEffect(() => {
  console.log('dateValue:', dateValue.value)
})
watchEffect(() => {
  console.log('dateTimeValue:', dateTimeValue.value)
})
watchEffect(() => {
  console.log('rangeValue:', rangeValue.value)
})
watchEffect(() => {
  console.log('timeRangeValue:', timeRangeValue.value)
})
watchEffect(() => {
  console.log('timeValue:', timeValue.value)
})
watchEffect(() => {
  console.log('secondsValue:', secondsValue.value)
})
watchEffect(() => {
  console.log('weekValue:', weekValue.value)
})
watchEffect(() => {
  console.log('monthValue:', monthValue.value)
})
watchEffect(() => {
  console.log('yearValue:', yearValue.value)
})
</script>
<template>
  <div>
    <h1>{{ $route.name }} {{ $route.meta.title }}</h1>
    <ul class="m-list">
      <li>
        <a class="u-file" href="https://vue3datepicker.com/" target="_blank">Vue Datepicker</a>
      </li>
      <li>
        <a class="u-file" href="https://vue3datepicker.com/installation/" target="_blank">Vue Datepicker Documents</a>
      </li>
    </ul>
    <Space align="top" class="mt30" :gap="6">
      <h1>DatePicker</h1>
      <Tag color="volcano">{{ pkg.dependencies['@vuepic/vue-datepicker'] }}</Tag>
    </Space>
    <h2 class="mt30 mb10">基本使用</h2>
    <DatePicker placeholder="请选择日期" v-model="dateValue" show-today format="yyyy-MM-dd" />
    <h2 class="mt30 mb10">禁用过去</h2>
    <DatePicker placeholder="请选择日期" v-model="dateValue" :min-date="new Date()" format="yyyy-MM-dd" />
    <h2 class="mt30 mb10">禁用未来</h2>
    <DatePicker placeholder="请选择日期" v-model="dateValue" :max-date="new Date()" format="yyyy-MM-dd" />
    <h2 class="mt30 mb10">日期时间选择器</h2>
    <DatePicker
      placeholder="请选择日期时间"
      v-model="dateTimeValue"
      format="yyyy-MM-dd HH:mm:ss"
      :width="240"
      show-time
      enable-seconds
    />
    <h2 class="mt30 mb10">日期范围选择器</h2>
    <DatePicker
      placeholder="请选择日期范围"
      v-model="rangeValue"
      range
      :preset-dates="presetDates"
      format="yyyy-MM-dd"
      :width="280"
    />
    <h2 class="mt30 mb10">日期范围选择器，双日期面板</h2>
    <DatePicker
      placeholder="请选择日期范围"
      v-model="rangeValue"
      mode="range"
      format="yyyy-MM-dd"
      :width="280"
      range
      multi-calendars
    />
    <h2 class="mt30 mb10">预设范围</h2>
    <h3 class="mb10">预设常用的日期范围以提高用户体验</h3>
    <DatePicker
      placeholder="请选择日期范围"
      mode="range"
      format="yyyy-MM-dd"
      :width="280"
      range
      :preset-dates="presetDates"
      multi-calendars
      v-model="rangeValue"
    />
    <h2 class="mt30 mb10">时分选择器</h2>
    <DatePicker
      placeholder="请选择时间"
      v-model="timeValue"
      mode="time"
      show-time
      mode-height="120"
      format="HH:mm"
      :width="120"
    />
    <h2 class="mt30 mb10">时分秒选择器</h2>
    <DatePicker
      placeholder="请选择时间"
      v-model="secondsValue"
      mode="time"
      show-time
      enable-seconds
      mode-height="120"
      format="HH:mm:ss"
      :width="150"
    />
    <h2 class="mt30 mb10">时分秒范围选择器</h2>
    <DatePicker
      placeholder="请选择时间"
      v-model="timeRangeValue"
      mode="time"
      show-time
      range
      enable-seconds
      mode-height="120"
      format="HH:mm:ss"
      :width="240"
    />
    <h2 class="mt30 mb10"
      >周选择器 ({{ format(weekValue[0], 'yyyy-MM-dd') + ' - ' + format(weekValue[1], 'yyyy-MM-dd') }})</h2
    >
    <DatePicker placeholder="请选择周" v-model="weekValue" mode="week" format="yyyy年 第ww周" :width="200" />
    <h2 class="mt30 mb10">月选择器</h2>
    <DatePicker placeholder="请选择月" v-model="monthValue" mode="month" format="yyyy-MM" :width="150" />
    <h2 class="mt30 mb10">年选择器</h2>
    <DatePicker placeholder="请选择年" v-model="yearValue" mode="year" format="yyyy" :width="120" />
  </div>
</template>
